<template>
  <div class="app-container">


    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.keyword" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item label="">
        <div class="block">
            <span class="demonstration">用户注册时间</span>

            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期">
            </el-date-picker>
            
        </div>
      </el-form-item>


        <!-- <el-form-item  label="创建时间">
                <el-date-picker
                v-model="searchObj.createTimeBegin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>
            至
            <el-form-item>
                <el-date-picker
                v-model="searchObj.createTimeEnd"
                type="datetime"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item> -->

     
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="userlist"
      style="width: 100%"
      
    >
      <el-table-column label="序号" width="180">
        <template scope="scope">
          {{ scope.$index + 1 + (page - 1) * limit }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>

      <el-table-column prop="status" label="状态"> 
        <template scope="scope">
            {{scope.row.param.statusString}}
        </template>
      </el-table-column>
      <el-table-column prop="authStatus" label="认证状态">
        <template scope="scope">
            {{scope.row.param.authStatusString}}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template scope="scope">
            <el-button type="success" @click="auth(scope.row.id,2)">通过</el-button>
            <el-button type="danger" @click="auth(scope.row.id,-1)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import userinfo from "@/api/userinfo";
export default {
  data() {
    return {
      value1:['',''],
      page: 1,
      limit: 5,
      userlist: [],
      searchObj: {
        createTimeBegin:'',
        createTimeEnd:'',
        authStatus:1
      },
      total: 0,
    };
  },
  methods: {
    auth(id,authStatus){
        userinfo.auth(id,authStatus).then(resp=>{
            this.fetchData(this.page);
        })
    },
    fetchData(page = 1) {
      this.page = page;

      this.searchObj.createTimeBegin=this.value1[0]
      this.searchObj.createTimeEnd=this.value1[1]

      userinfo.userList(this.page, this.limit, this.searchObj).then((resp) => {
        this.userlist = resp.data.pages.records;
        this.total = resp.data.pages.total;
      });
    },
  },
  created() {
    this.fetchData();
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>